<html><head>
  <title>RvQuery Trace Console</title>
  <!-- http://www.graphdracula.net/ Dracular Graph Library -->
  <script type="text/javascript" src="${resource(dir:'js', file:'seedrandom.js')}"></script>
  <script type="text/javascript" src="${resource(dir:'js', file:'raphael-min.js')}"></script>
  <script type="text/javascript" src="${resource(dir:'js', file:'dracula_graffle.js')}"></script>
  <script type="text/javascript" src="${resource(dir:'js', file:'dracula_graph.js')}"></script>
  <script type="text/javascript" src="${resource(dir:'js', file:'dracula_algorithms.js')}"></script>
  <script type="text/javascript" src="${resource(dir:'js', file:'jquery-1.4.2.min.js')}"></script>
  <meta name="layout" content="ext"/>
  <style>
  	#header {
    background: #7F99BE url(${resource(dir:'images', file:'layout-browser-hd-bg.gif')}) repeat-x center;
	}
	#header h1 {
	    font-size: 16px;
	    color: #fff;
	    font-weight: normal;
	    padding: 5px 10px;
	}
	  
  </style>
  <script type="text/javascript">
    Ext.onReady(function() {
		var g = null;
		var renderer = null;
		var response = Ext.Ajax.request({
			url: '${createLink(action:'model')}',
			callback: function(opt, success, response) {
				var model = Ext.decode(response.responseText);
				Ext.define('RvMessage', model.dataModel);

				var dataStore = Ext.create('Ext.data.Store', {
					  autoLoad: true,
					  autoSync: true,
					  model: 'RvMessage',
					    proxy: {
					        type: 'ajax',
					        url: '${createLink(action:'data')}',
					        reader: {
				            type: 'json',
				            root: 'rows'
				        },
				        writer: {
				            type: 'json',
				            writeAllFields: false
				        }
				    }
				}); 
				
				var gridPanel = Ext.create('Ext.grid.Panel', {
				    title: 'Grid Panel',
				    store: dataStore,
				    columns: model.columns,
				    align: 'stretchmax'
				});

		    	var mainMenu = Ext.create('Ext.panel.Panel', {
		    	    title: 'Rule 관리자',
		    	    region: 'west',
		    	    margins: '0 0 0 0',
		    	    flex: .4,
		    	    collapsible: true,
		    	    titleCollapse: true,
		    	    split : true,
		    	    listeners : {
			    		resize: {
							fn: function(el) {
								if (g != null && renderer != null) {
									var panel = jQuery('#product-panel-body');
									var w = panel.width();
									var h = panel.height();
									renderer.width = w;
									renderer.height = h;
									renderer.r.setSize(w, h);
									renderer.r.setViewBox(w, h, 1);
									renderer.draw()
								}
							}
					    }  
			    	},
			   	    layout: 'border',
		    	    items: [{
			    	    region: 'north',
		    	    	xtype: 'panel',
			            title: 'Rule 탐색기',
			            flex : 1,
			            split: true
		    	    }, {
			    	    xtype: 'panel',
			    	    region: 'center',
		    		    id   : 'product-panel',
	    		        title: 'Rule 다이어그램',
		    		    height: 300,
			   	        split: true
			        }, {
			    	    xtype: 'panel',
			    	    region: 'south',
			            title: '코드',
			            flex : 1
			        }]
		    	});

			   	var userManagementPanel = Ext.create('Ext.panel.Panel', {
			   	    title: 'User Management'
			   	 });

			   	 var contentPanel = Ext.create('Ext.tab.Panel', {
			   	    region: 'center',
			   	    margins: '0 5 5 0',
			   	    items: [gridPanel, userManagementPanel]
			   	});

			   	Ext.create('Ext.container.Viewport', {
			   	    layout: 'border',
			   	    items: [{
				   	    id    : 'header',
			   	        region: 'north',
			   	        height: 30,
			   	        xtype: 'container',
			   	        html: '<h1>Lot Flow Rule Tracer</h1>'
			   	    },  mainMenu, contentPanel]
			   	});

		        g = new Graph();
		        g.edgeFactory.template.style.directed = true;		        
		        g.addEdge("초기상태", "설비할당대기", {directed:true});
		        g.addEdge("설비할당대기", "설비할당완료", {directed:true});
		        g.addEdge("설비할당완료", "이동지시", {directed:true});
		        g.addEdge("이동지시", "이동완료", {directed:true});
		        var layouter = new Graph.Layout.Ordered(g, topological_sort(g));
		        var panel    = jQuery('#product-panel-body')
		        renderer = new Graph.Renderer.Raphael('product-panel-body', g, panel.width(), panel.height());
		        renderer.draw();

			   	
			}						
		});	

    });
  </script>
</head>

<body>
</body>

</html>
